<template>
  <div class="message">
    <div class="title">
        {{name}}
    </div>
    <div class="content">
        {{content}}
    </div>
    <div class="time">
        {{time}}
    </div>
    <back :scroll="false"></back>
  </div>
</template>
<script>
import back from '../../components/base/back.vue'

export default {
  name: 'message-detail',
  comments: 'message-detail',
  components: {
    back
  },
  data () {
    return {
      name: '健身女王',
      content: '消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容。',
      time: '2018-01-01 10:10:10'
    }
  },
  created () {
    document.title = '消息详细'
  },
  methods: {
  }
}
</script>
<style lang="postcss" scoped>
.message{
    margin: 10px;
    background-color: #999;
    color: #fff;
    border-radius: 4px;
    padding: 4px;
}
.title{
    text-align: center;
    border-bottom: 1px solid #888;
}
.content{
    text-indent: 2em;
    text-align: left;
    color: #fff;
    border-bottom: 1px solid #888;
    min-height: 100px;
    padding: 10px 0px;
}
.time{
    text-align: right;
    color: yellow;
}
</style>
